<template>
  <div>

    <div class="ele-body"
         style="padding-bottom: 71px">
      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="130px"
               @keyup.enter.native="submit"
               @submit.native.prevent>

        <!-- 商家基础配置 -->

        <!-- 客服配置 -->

        <el-card shadow="never"
                 header="支付配置"
                 body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15">
            <el-col :span="8">

              <!-- <el-form-item label="商家扣率:">
				
				  <el-input v-model.number="form.sjCalcVal"
							type="number"
							maxlength="3"
							@blur="e=>inputChangeWx(e,form.sjCalcVal)"
							oninput="value=value.replace(/[^0-9]/g,'')"
							placeholder="请输入商家扣率"
							clearable><template v-slot:append>%</template></el-input>
				</el-form-item> -->
            </el-col>
            <el-col :lg="8"
                    :md="12">
              <el-form-item label="机构号"
                            label-width="150px"
                            prop="clientCode">
                <el-input v-model.trim="form.clientCode"
                          placeholder="请输入机构号"
                          clearable></el-input>
              </el-form-item>

              <el-form-item label="渠道密钥"
                            label-width="150px"
                            prop="clientKey">
                <el-input v-model.trim="form.clientKey"
                          placeholder="请输入渠道密钥"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="客户编号"
                            label-width="150px"
                            prop="orgId">
                <el-input v-model.trim="form.orgId"
                          maxlength="15"
                          placeholder="请输入客户编号"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="微信小程序appid"
                            label-width="150px"
                            prop="wxXcxAppid">
                <el-input v-model.trim="form.wxXcxAppid"
                          placeholder="请输入微信小程序appid"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="微信小程序Secret"
                            label-width="150px"
                            prop="wxXcxSecret">
                <el-input v-model.trim="form.wxXcxSecret"
                          placeholder="请输入微信小程序Secret"
                          clearable></el-input>
              </el-form-item>

              <el-form-item label="支付宝appid"
                            label-width="150px"
                            prop="zfbShhAppid">
                <el-input v-model.trim="form.zfbShhAppid"
                          placeholder="请输入支付宝生活号appid"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="支付宝生活号公钥"
                            label-width="150px"
                            prop="zfbShhPublicKey">
                <el-input v-model.trim="form.zfbShhPublicKey"
                          placeholder="请输入支付宝生活号公钥"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="支付宝生活号私钥"
                            label-width="150px"
                            prop="zfbShhPrivateKey">
                <el-input v-model.trim="form.zfbShhPrivateKey"
                          placeholder="请输入支付宝生活号私钥"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label-width="150px">
                <el-button type="primary"
                           :loading="loading"
                           @click="submit">
                  保存更改
                </el-button>
              </el-form-item>
            </el-col>

          </el-row>

        </el-card>

      </el-form>
    </div>
  </div>

</template>
  
  <script>

import { save, query, dsfoempayconfigAdd, dsfoempayconfigUpdate, dsfoempayconfigGet } from '@/api/agent/pointAllocation';
const DEFAULT_FORM = {
  // oemId: this.$store.state.user.info.oemId,
  // systemIcon: [],
  // site_name:'',
  // browserIcon:[],
  // site_copyright:'',
  // site_beian:'',
  // site_jingbeian:'',
  // loginBackground: [],
  // loginLeftIcon:[],
  // kf_date:'',
  // serviceQrCode:[],
  // kf_mailbox:'',
  // kf_phone:'',
  // kf_address:'',
};
import EleImageUpload from 'ele-admin/es/ele-image-upload';
import request from '@/utils/request';
export default {
  name: 'FormAdvanced',
  components: { EleImageUpload },
  data () {
    return {
      // 复选框
      checkList: ['D音H5发布'],
      // 能力名称——能力选择——复选框
      checkSelList: [],
      modalTitle: '',
      modalPic: false,
      isChoice: "单选",
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      // 表单提交状态
      loading: false,
      // 表单数据
      form: {
        // 机构号
        clientCode: '',
        //渠道密钥
        clientKey: '',
        // 客户编号
        orgId: '',

        // 支付宝生活号appid
        zfbShhAppid: '',
        // 支付宝公钥
        zfbShhPublicKey: '',
        // 支付宝生活号私钥
        zfbShhPrivateKey: '',

        // 微信小程序appid
        wxXcxAppid: '',
        // 微信小程序secret
        wxXcxSecret: '',
        oemId: this.$store.state.user.info.oemId
      },
      // 表单验证规则
      rules: {
        clientCode: [
          {
            required: true,
            message: '请填写机构号',
            trigger: 'blur'
          }
        ],
        clientKey: [
          {
            required: true,
            message: '请填写渠道密钥',
            trigger: 'blur'
          }
        ],
        orgId: [
          {
            required: true,
            message: '请客户编号',
            trigger: 'blur'
          }
        ],
        // zfbShhAppid: [
        //   {
        //     required: true,
        //     message: '请填写支付宝生活号appid',
        //     trigger: 'blur'
        //   }
        // ],
        // zfbShhPublicKey: [
        //   {
        //     required: true,
        //     message: '请填写支付宝生活号公钥',
        //     trigger: 'blur'
        //   }
        // ],
        // zfbShhPrivateKey: [
        //   {
        //     required: true,
        //     message: '请填写支付宝生活号密钥',
        //     trigger: 'blur'
        //   }
        // ],
        // wxXcxAppid: [
        //   {
        //     required: true,
        //     message: '请填写小程序appid',
        //     trigger: 'blur'
        //   }
        // ],
        // wxXcxSecret: [
        //   {
        //     required: true,
        //     message: '请填写微信小程序secret',
        //     trigger: 'blur'
        //   }
        // ]

      },
      // 表单验证信息
      validMsg: '',
      checkAll: [],
      checkSelAll: [],
      isUpdata: false
    };
  },
  mounted () {
    this.querys()
  },
  methods: {
    async querys () {
      // 查询回显

      const res = await dsfoempayconfigGet({
        oemId: this.$store.state.user.info.oemId
      })
      console.log(res)
      if (res.data) {
        //   是修改
        this.$util.assignObject(this.form, {
          ...res.data
        });
        this.form.id = res.data.id;
        this.isUpdata = true;
        this.$message
      } else {
        this.isUpdata = false;
      }
    },
    inputChangeWx (e, value) {
      console.log(value)
      if (typeof value == "number") {
        if (value > 100) {
          this.$message({
            message: "输入的扣率大于100请重新输入",
            type: "warning",
          });
          this.form.sjCalcVal = 100
        }
      }
      return

    },
    checkClick (e) {
      console.log("e=====", e)
      this.checkAll = e
    },
    checkSelClick (e) {
      console.log("e=====", e)
      this.checkSelAll = e
    },
    // 选择图片
    modalPicTap (tit, picTit, openTitle) {
      this.modalTitle = openTitle;
      this.isChoice = tit === "dan" ? "单选" : "多选";
      this.picTit = picTit;
      this.modalPic = true;
      this.$nextTick(() => {
        this.$refs['upload'].show()
      })
    },
    // 选中图片
    getPic (pc) {
      console.log("pc========", pc)
      switch (this.picTit) {
        case "systemIcon":
          this.form.systemIcon = pc.imgUrl;
          break;
        case "loginBackground":
          this.form.loginBackground = pc.imgUrl;
          break;
        case "browserIcon":
          this.form.browserIcon = pc.imgUrl;
          break;
        case "serviceQrCode":
          this.form.serviceQrCode = pc.imgUrl;
          break;
        case "loginLeftIcon":
          this.form.loginLeftIcon = pc.imgUrl;
          break;
        case "logoDiagram":
          this.form.logoDiagram = pc.imgUrl;
          break;
        case "xcxHomePageImg":
          this.form.xcxHomePageImg = pc.imgUrl;
          break;


      }
      this.modalPic = false;
    },
    //删除图片
    handleRemove (field) {
      this.form[field] = '';
    },
    /* 表单提交 */
    submit () {
      this.$refs['form'].validate((valid, obj) => {
        if (valid) {
          this.loading = true;
          console.log(this.form)
          const saveOrUpdate = this.isUpdata ? dsfoempayconfigUpdate : dsfoempayconfigAdd;
          saveOrUpdate(this.form)
            .then((msg) => {
              this.loading = false;
              // id 不存在则调用查询是否已保存，否则保存多次都会不传id
              // if(!this.form.id){
              this.querys();
              // }
              this.$message.success('提交成功！');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
          return false;
        }
      });
    },
    onUpload (item) {
      console.log('item:', item);
      item.status = 'uploading';
      const formData = new FormData();
      formData.append('file', item.file);
      request({
        url: '/common/uploadFile',
        method: 'post',
        data: formData,
        onUploadProgress: (e) => {  // 文件上传进度回调
          if (e.lengthComputable) {
            item.progress = e.loaded / e.total * 100;
          }
        }
      }).then((res) => {
        if (res.data.code === 0) {
          item.status = 'done';
          item.url = res.data.data.url;
          // 如果你上传的不是图片格式, 建议将 url 字段作为缩略图, 再添加其它字段作为最后提交数据
          //item.url = res.data.data.thumbnail;  // 也可以不赋值 url 字段, 默认会显示为一个文件图标
          item.fileUrl = res.data.data.url;
        }
      }).catch((e) => {
        item.status = 'exception';
      });
    }
  }
};
  </script>
  